dl {
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 1em;
  margin-bottom: 1.125rem;
}

dd {
  margin: 0 0 0 1em;
}

dd + dt {
  margin-top: 0.5em;
}

.question {
  background: #f7f781;
  position: relative;
  display: flex;
  padding: 0.5em;
  margin-bottom: 1.125rem;
  counter-increment: questions;
}

.question p:last-child {
  margin-bottom: 0;
}

.question::before {
  background: #ffdf3f;
  content: 'QUESTION ' counter(questions);
  width: max-content;
  margin: -0.5em 0.5em -0.5em -0.5em;
  padding: 0.5em;
  font-weight: bold;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .question {
    flex-direction: column;
  }

  .question::before {
    width: auto;
    margin-right: -0.5em;
    margin-bottom: 0.5rem;
  }
}

.note {
  background: #007a1278;
  position: relative;
  display: flex;
}

.note::before {
  background: #007a3dd6;
  content: 'NOTE';
  width: max-content;
  padding: 0 0.5em;
  margin-right: 0.5em;
  font-weight: bold;
}

.todo {
  background: #f7f781;
  position: relative;
  display: flex;
}

.todo::before {
  background: #c78f2c;
  content: 'TODO';
  width: max-content;
  color: white;
  padding: 0 0.5em;
  margin-right: 0.5em;
  font-weight: bold;
}
